<template>
  <div ref="chart3" class="chart3" style="width: 600px;height: 380px;"></div>
</template>
<script>
import * as echarts from 'echarts';//echarts5的引入方式
export default {
  components: {
    echarts
  },
  data() {
    return {}
  },
  mounted() {
    this.getmain3()
  },
  methods: {
    getmain3() {
      // let charts = document.querySelector("chart3");
      var myChart3 = echarts.init(this.$refs.chart3);
      // let myChart = this.$echarts.init(myChart3);
      let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF", "#0034ff"];
      let placeHolderStyle = {
        normal: {
          // 设置扇形的阴影
          shadowBlur: 90,
          shadowColor: "rgba(255,227,42,1)",
          shadowOffsetX: -2,
          shadowOffsetY: 10,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      };
      //每一个环的数据
      let data0 = [
        {
          name: "户型图比例",
          type: "pie",
          roundCap: true,
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [155, 175],//
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "钥匙率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [130, 150],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "委托率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [105, 125],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "经理陪看率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [80, 100],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "实勘率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [180, 200],
          itemStyle: placeHolderStyle,
          label: {
            normal: {
              show: false
            }
          },
          data: getData()
        }
      ];

      function getData(percent) {
        percent = Math.random() * 1;
        return [
          {
            value: percent,
            name: percent
            // itemStyle: {
            //      normal: {
            //              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                         offset: 0,
            //                         color: '#00B2EE'
            //                     }, {
            //                         offset: 1,
            //                         color: '#00DDE6'
            //                     }])
            //     }
            // }
          },
          {
            value: 1 - percent,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ];
      }

      let option = {
        backgroundColor: "#0E2A43",
        color,

        tooltip: {
          trigger: "item",
          formatter: function (params, ticket, callback) {
            return params.seriesName + ": " + params.name * 100 + "%";
          }
        },
        legend: {
          top: "15%",
          left: "20%",
          itemHeight: 18,
          data: ["户型图比例", "实勘率", "委托率", "经理陪看率", "钥匙率"],
          textStyle: {
            color: "#fff",
            fontSize: "100%"
          },
          // selectedMode: true,
          orient: "vertical"
        },
        series: data0
      };
      // setInterval(function() {
      //   let data = option.series;
      //   data.map(item => {
      //     item.data = getData();
      //   });
      //   myChart.setOption(option);
      // }, 2000);
      myChart3.setOption(option);
    }

  }
}
</script>
<style scoped lang="less">

</style>
